<template>
    <div>
        <button @click="agesort">年龄升序</button>&emsp;<button @click="heightsort">身高降序</button>&emsp;<button @click="terms">条件过滤</button>
        <table border="1" cellspacing="0" width="80%">
            <tr>
                <th>名字</th>
                <th>年龄</th>
                <th>身高</th>
                <th>家乡</th>
                <th>班级详情</th>
            </tr>
            <tr v-for="item in students_list" :key="item.id">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.height}}</td>
                <td>{{item.home}}</td>
                <td style="width:220px;">
                    <tr>
                        <td>
                            班级名称
                        </td>
                        <td>
                            班级地址
                        </td>
                    </tr>
                    <tr>
                        <td>
                            {{item.classroom.class_name}}
                        </td>
                        <td style="width:100px;">
                            {{item.classroom.address}}
                        </td>                       
                    </tr>
                </td>
            </tr>
        </table>
        <button @click="up_page">上一页</button>
        <button>{{this.page}}</button>
        <button @click="down_page">下一页</button>
        
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            students_list:[],
            max_number:3,
            page:1,
            status:'',
        }
    },
    methods: {
        get_page(){
            axios({
                url:'http://127.0.0.1:8000/userapp/students/',
                method:"get",
                params:{
                    max_number:this.max_number,
                    page:this.page
                }
            }).then(resp=>{
                console.log(resp.data)
                this.students_list = resp.data
            })
        },
        up_page(){
            if(this.page == 1){
                    
            }else{
                this.page -= 1
                this.get_page()
            }
        },
        down_page(){
            if(this.page <= 1){
                this.page +=1
                this.get_page()
            }else{}
        },
        agesort(){
                this.status = "1"
            axios({
                url:'http://127.0.0.1:8000/userapp/students/',
                method:"get",
                params:{
                    max_number:10,
                    page:this.page,
                    "status":this.status,
                }
            }).then(resp=>{
                console.log(resp.data)
                this.students_list = resp.data
            })
        },
        heightsort(){
                this.status = "2"
            axios({
                url:'http://127.0.0.1:8000/userapp/students/',
                method:"get",
                params:{
                    max_number:10,
                    page:this.page,
                    "status":this.status,
                }
            }).then(resp=>{
                console.log(resp.data)
                this.students_list = resp.data
            })
        },
        terms(){
                this.status = "3"
            axios({
                url:'http://127.0.0.1:8000/userapp/students/',
                method:"get",
                params:{
                    max_number:10,
                    page:this.page,
                    "status":this.status,
                }
            }).then(resp=>{
                console.log(resp.data)
                this.students_list = resp.data
            })
        }
    },
    created() {
        this.get_page()
    }
}
</script>

<style scoped>

</style>
